<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('NewBee商城-订单列表','my-orders')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<!-- nav -->
<nav th:replace="mall/header::nav-fragment"></nav>

<!-- personal -->
<div id="personal">
    <div class="self-info center">

        <!-- sidebar -->
        <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

        <div class="intro fr">
            <div class="uc-box uc-main-box">
                <div class="uc-content-box order-list-box">
                    <div class="box-hd">
                        <h1 class="title">我的订单
                            <small>请谨防钓鱼链接或诈骗电话，<a href="##">了解更多&gt;</a>
                            </small>
                        </h1>
                    </div>
                    <div class="box-bd">
                        <div id="J_orderList">
                            <ul class="order-list">
                                <th:block th:if="${#lists.isEmpty(orderList)}">
                                    <img style="margin-top: 16px;" th:src="@{/mall/image/null-content.png}">
                                    <small><a th:href="@{/index}">&nbsp;&nbsp;&nbsp;&nbsp;去购物&gt;</a></small>
                                </th:block>
                                <th:block th:unless="${#lists.isEmpty(orderList)}">
                                    <!-- 遍历订单 -->
                                    <th:block th:each="order : ${orderMap}">
                                        <li class="uc-order-item uc-order-item-list">
                                            <div class="order-detail">
                                                <div class="order-summary">
                                                    <!-- 使用 th:switch 来简化多个状态判断 -->
                                                    <th:block th:switch="${order.key.orderStatus}">
                                                        <!-- 待支付 -->
                                                        <th:block th:case="0">
                                                            <div class="order-status-need-pay">待支付</div>
                                                        </th:block>
                                                        <!-- 已支付 -->
                                                        <th:block th:case="1">
                                                            <div class="order-status-paid">已支付</div>
                                                        </th:block>
                                                        <!-- 配货完成 -->
                                                        <th:block th:case="2">
                                                            <div class="order-status-ready">发货完成，正在配送</div>
                                                        </th:block>
                                                        <!-- 出库成功 -->
                                                        <th:block th:case="3">
                                                            <div class="order-status-shipped">商品已送达，等待取货</div>
                                                        </th:block>
                                                        <!-- 交易成功 -->
                                                        <th:block th:case="4">
                                                            <div class="order-status-success">交易成功</div>
                                                        </th:block>

                                                        <!-- 手动关闭 -->
                                                        <th:block th:case="-1">
                                                            <div class="order-status-closed">已取消订单</div>
                                                        </th:block>
                                                        <!-- 超时关闭 -->
                                                        <th:block th:case="-2">
                                                            <div class="order-status-timeout">超时关闭</div>
                                                        </th:block>
                                                        <!-- 默认状态 -->
                                                        <th:block th:case="*">
                                                            <div class="order-status-unknown">未知状态</div>
                                                        </th:block>
                                                    </th:block>
                                                </div>
                                            </div>
                                            <table class="order-detail-table">
                                                <thead>
                                                <tr>
                                                    <th class="col-main">
                                                        <p class="caption-info">
                                                            下单时间：<th:block th:text="${order.key.createTime}">02月07日</th:block>
                                                            <span class="sep">|</span>订单号：
                                                            <a th:href="@{${'/shopping/orders/' + order.key.orderNumber}}"
                                                               th:text="${order.key.orderNumber}">201908121807</a>
                                                        </p>
                                                    </th>
                                                    <th class="col-sub">
                                                        <p class="caption-price">应付金额：
                                                            <span class="num" th:text="${order.key.payment}+'0'">1299.00</span>元
                                                        </p>
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td class="order-items">
                                                        <ul class="goods-list">
                                                            <!-- 遍历与当前订单关联的订单项 -->
                                                            <th:block th:each="orderItem : ${order.value}">
                                                                <li>
                                                                    <div class="figure figure-thumb">
                                                                        <a target="_blank"
                                                                           th:href="@{'/shopping/item/detail/' + ${orderItem.itemId}}">
                                                                            <img th:src="@{${orderItem.itemCoverImg}}"
                                                                                 width="80" height="80" alt="">
                                                                        </a>
                                                                    </div>
                                                                    <p class="name">
                                                                        <a target="_blank"
                                                                           th:href="@{'/shopping/item/detail/' + ${orderItem.itemId}}"
                                                                           th:text="${orderItem.itemName}">newbee</a>
                                                                    </p>
                                                                    <p class="price"
                                                                       th:text="${orderItem.itemPrice + '0元 x ' + orderItem.number}">13元 × 1</p>
                                                                </li>
                                                            </th:block>
                                                        </ul>
                                                    </td>
                                                    <td class="order-actions">
                                                        <a class="btn btn-small btn-line-gray"
                                                           th:href="@{${'/shopping/orders/' + order.key.orderNumber}}">订单详情</a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </li>
                                    </th:block>
                                </th:block>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div th:replace="mall/footer::footer-fragment"></div>

<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 3 -->
<script th:src="@{/mall/js/bootstrap3.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert2/sweetalert2.all.min.js}"></script>
<script>
    $(document).ready(function() {
        // 监听所有商品链接点击事件，假设所有商品链接都在 #flash, #recommend 这类容器内
        // 你可以根据实际结构调整选择器
        $("#flash, #recommend, #sub_banner").on("click", "a", function(event) {
            var $link = $(this);
            var href = $link.attr("href");
            var id = $link.data("id");
            var name = $link.data("name");

            // 如果没有data-id，尝试从href中提取数字ID，假设URL是item/detail/123这种格式
            if (!id && href) {
                var match = href.match(/(\d+)/);
                if (match) {
                    id = match[1];
                }
            }

            if (!name) {
                // 如果没有data-name，可以用链接文本或空字符串
                name = $link.find(".name").text() || $link.text() || "";
            }

            var eventData = {
                productId: id || "unknown",
                productName: name || "unknown",
                timestamp: new Date().toISOString()
            };

            // 发送 Ajax 请求
            $.ajax({
                url: '/api/track/click',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(eventData),
                success: function() {
                    console.log("点击事件已发送：", eventData);
                },
                error: function(err) {
                    console.error("点击事件发送失败：", err);
                }
            });
        });
    });
</script>
</body>
</html>
